
 <template>
  <div class="presentationData">
    <!-- 左侧区域 -->
    <div class="left">
      <leftSearch :getSelectItem="getSelectItem" />
    </div>

    <!-- 中间区域 -->
    <article class="middle_main">
      <!-- tabs -->
      <div class="atlas-tab-wrap flex-center-start">
        <!-- tabs -->
        <div class="atlas-tab">
          <span class="tcName">{{
            dataItem.fileName ? dataItem.fileName : "资料名称"
          }}</span>
          <span class="download" @click="download" title="文件下载">
            <i class="el-icon-download"></i>
          </span>
        </div>
      </div>
      <!-- list -->
      <pdf :fileUrl="dataItem.fileUrlPdf ? dataItem.fileUrlPdf : ''" />
    </article>
    <!-- 右侧区域 -->
    <article class="right">
      <!-- <rightList
        :hotPic="dataListR"
        :browseList="dataBrowseListR"
        :getSelectItem="getSelectItem"
      /> -->
      <!-- 右侧详情 -->
      <rightDetail v-if="Object.keys(proItem).length > 0" :proItem="proItem" />
    </article>
  </div>
</template>

<script>
import { mapState } from "vuex";
import leftSearch from "@/components/common/leftSearch.vue";
// import rightList from "@/components/common/rightList.vue";
import rightDetail from "@/components/common/rightDetail.vue";

import pdf from "@/components/pdf.vue";
export default {
  name: "presentationData",
  components: {
    leftSearch,
    // rightList,
    pdf,
    rightDetail,
  },
  data() {
    return {
      currentPage: 1,
      isDetails: false,
      dataItem: {},
    };
  },
  updated() {
    console.log(this.dataListR);
  },
  computed: {
    ...mapState({
      dataListR: (state) => state.qbShow.dataListR,
      dataBrowseListR: (state) => state.qbShow.dataBrowseListR,
      // proBrowseListR: (state) => state.qbShow.proBrowseListR,
      dataParamsR: (state) => state.qbShow.dataParamsR,
      dataBrowseR: (state) => state.qbShow.dataBrowseR,
      proItem: (state) => state.qbShow.proItem,
    }),
  },
  created() {
    this.getDataAllR({ params: this.dataParamsR });
    this.getDataBrowseAllR({ params: this.dataBrowseR });
    // this.findByIdDoc();
  },
  methods: {
    // 热门下载
    getDataAllR({ params }) {
      this.$store.dispatch("qbShow/getDataAllR", { params });
    },
    // 热门浏览
    getDataBrowseAllR({ params }) {
      this.$store.dispatch("qbShow/getDataBrowseAllR", { params });
    },
    // 资料详情
    // findByIdDoc() {
    //   this.$store.dispatch("qbShow/findByIdDoc", { id: "" });
    // },
    atlasDetails() {
      this.isDetails = !this.isDetails;
    },
    getSelectItem(item) {
      const fileUrl = item.fileUrl + "";
      // #toolbar=0 自定义下载按钮 下载文件
      let str =
        fileUrl.substring(0, fileUrl.indexOf(".")) + ".pdf" + "#toolbar=0";
      item.fileUrlPdf = str;
      this.dataItem = item;
    },
    // 文件下载
    download() {
      if (this.dataItem.fileUrl) {
        window.location.href = `${window.VUE_APP_BASE_URL}/${this.dataItem.fileUrl}`;
        // 下载量
        this.$store.dispatch("qbShow/updateById", {
          params: {
            connectionType: this.dataItem.connectionType,
            id: this.dataItem.id,
            downloads: 1,
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.presentationData {
  position: relative;
  top: 10vh;
  padding: 0.1rem 0.5rem;
  display: flex;
  height: 90vh;
  //  左侧侧边栏
  .left {
    width: 3rem;
    height: 88vh;
    background: url(~@/assets/showDataSubystem/left.png) no-repeat;
    background-size: 100% 107%;
    padding: 0 0.2rem;
    font-size: 0.16rem;
  }
  //   中间内容区域
  .middle_main {
    width: 12rem;
    background: url(~@/assets/showDataSubystem/center.png) no-repeat;
    background-size: 100% 107%;
    margin-top: -0.3rem;
    margin-left: 0.1rem;
    padding: 0.1rem;
    .atlas-tab-wrap {
      height: 0.5rem;
      border-bottom: 1px solid #034475;
      font-size: 0.16rem;
      .atlas-tab {
        width: 100%;
        color: #2a9dff;
        padding-left: 0.5rem;
        .tcName {
          display: inline-block;
          width: 1.6rem;
          margin-left: 0.15rem;
          font-size: 0.2rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: .19rem;   
        }
        .download {
          margin-left: 2%;
          cursor: pointer;
        }
      }
    }
  }
  //   右侧详情
  .right {
    width: 3.5rem;
    margin-top: -0.3rem;
    background: url(~@/assets/showDataSubystem/right@2x.png) no-repeat;
    background-position: top;
    background-size: 100% 107%;
    padding: 0.2rem;
    font-size: 0.12rem;
    color: white;
    .right-details {
      padding-top: 0;
    }
  }
  ::-webkit-scrollbar {
    width: 0.05rem;
    height: 0.05rem;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    background: #2a9dff;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(29, 25, 83, 0.5);
  }
}
</style>